Todo.View.NewItem = Backbone.View.extend({
    model: new Backbone.Model(),

    el    : 'section#newitem',

    // The DOM events specific to an item.
    events: {
        "keydown textarea"       : "keydownTextarea",
        "keyup textarea"         : "showHideMic",
        "focus textarea"         : "resizeTextarea",
        "webkitspeechchange #mic": "speachChange",
        "createItem"             : "createItem",
        "createCategory"         : "createCategory"
    },

    initialize: function () {
        return;
        if (Todo.debug) {
            console.log('Todo.View.NewItem::initialize');
        }
    },

    showHideMic: function () {
        this.resizeTextarea();

        if (this.$('#name').val() != '') {
            this.$('.clear').show();
            this.$('#mic').css('opacity', 0);
        } else {
            this.$('.clear').hide();
            this.$('#mic').css('opacity', 1);
        }
    },

    keydownTextarea: function (e) {
        var $target = $(e.target);

        if (e.keyCode == 13) {
            var value = $.trim($target.val());

            if (value.indexOf('@') === 0) {
                this.$el.trigger('createCategory', value.substring(1));
            } else {
                this.$el.trigger('createItem', value);
            }

            $target.val('').blur();
        }

        if (e.keyCode == 27) {
            $target.val('').blur();
        }

        this.resizeTextarea();
    },

    resizeTextarea: function () {
        var $t = this.$('textarea');
        $('#clone').html($t.val());

        $t.css({
            width : $('#clone').width() + 30,
            height: $('#clone').height()
        });
    },

    speachChange: function () {
        var $mic = this.$('#mic');
        var result = $mic.val();
        $mic.val('');

        this.$('#name').val(result).focus();

        $mic.css('opacity', 0);
        this.$('.clear').show();
    },

    createCategory: function (event, catName) {
        if (Todo.debug) {
            console.log('Todo.View.NewItem::createCategory', catName);
        }
    },

    createItem: function (event, itemName) {
        if (Todo.debug) {
            console.log('Todo.View.NewItem::createItem', itemName);
        }
    }
});